   // 当前选中的图片索引
        let currentIndex = 0;
        let imageData = [];
        let isZoomed = false;
        
        // 滚动动画
        const animateOnScroll = () => {
            const memoryItems = document.querySelectorAll('.memory-fade');
            memoryItems.forEach((item, index) => {
                if (isElementInViewport(item)) {
                    setTimeout(() => {
                        item.classList.add('visible');
                    }, index * 100);
                }
            });
        };
        
        // 判断元素是否在视口中
        const isElementInViewport = (el) => {
            const rect = el.getBoundingClientRect();
            return (
                rect.top <= (window.innerHeight * 0.9) &&
                rect.bottom >= 0
            );
        };
        
        // 加载JSON数据
        const loadImages = async () => {
            try {
                const response = await fetch('img_data.json');
                if (!response.ok) {
                    throw new Error('无法加载图片数据');
                }
                imageData = await response.json();
                renderImages();
            } catch (error) {
                console.error('加载图片数据时出错:', error);
                // 加载失败时使用默认数据
                imageData = [
                    { id: 1, src: "https://picsum.photos/800/1200?random=11", title: "1", desc: "1" },
                ];
                renderImages();
            }
        };
        
        // 渲染图片
        const renderImages = () => {
            const container = document.getElementById('image-container');
            container.innerHTML = '';
            
            imageData.forEach((image, index) => {
                const card = document.createElement('div');
                card.className = 'image-card memory-fade cursor-pointer';
                card.setAttribute('data-index', index);
                card.setAttribute('data-img', image.src);
                
                card.innerHTML = `
                    <div class="image-wrapper">
                        <img src="${image.src}" alt="${image.title}">
                        <div class="image-overlay">
                            <div class="image-info">
                                <h3 class="image-title">${image.title}</h3>
                                <p class="image-desc">${image.desc}</p>
                            </div>
                        </div>
                    </div>
                `;
                
                container.appendChild(card);
            });
            
            // 添加点击事件
            document.querySelectorAll('.image-card').forEach(card => {
                card.addEventListener('click', () => {
                    const index = parseInt(card.getAttribute('data-index'));
                    openFullscreen(index);
                });
            });
            
            // 触发动画
            animateOnScroll();
        };
        
        // 打开全屏查看器
        const openFullscreen = (index) => {
            currentIndex = index;
            const image = imageData[index];
            
            document.getElementById('fullscreen-img').src = image.src;
            document.getElementById('fullscreen-title').textContent = image.title;
            document.getElementById('fullscreen-desc').textContent = image.desc;
            document.getElementById('fullscreen-view').classList.add('active');
            document.body.style.overflow = 'hidden';
            
            // 重置缩放状态
            isZoomed = false;
            document.getElementById('fullscreen-img').classList.remove('zoomed');
            document.getElementById('zoom-btn').innerHTML = '<i class="fa fa-search-plus"></i>';
        };
        
        // 关闭全屏查看器
        const closeFullscreen = () => {
            document.getElementById('fullscreen-view').classList.remove('active');
            document.body.style.overflow = '';
        };
        
        // 上一张图片
        const prevImage = () => {
            currentIndex = (currentIndex - 1 + imageData.length) % imageData.length;
            const image = imageData[currentIndex];
            
            document.getElementById('fullscreen-img').src = ''; // 重置图片以触发加载动画
            setTimeout(() => {
                document.getElementById('fullscreen-img').src = image.src;
                document.getElementById('fullscreen-title').textContent = image.title;
                document.getElementById('fullscreen-desc').textContent = image.desc;
            }, 50);
            
            // 重置缩放状态
            isZoomed = false;
            document.getElementById('fullscreen-img').classList.remove('zoomed');
            document.getElementById('zoom-btn').innerHTML = '<i class="fa fa-search-plus"></i>';
        };
        
        // 下一张图片
        const nextImage = () => {
            currentIndex = (currentIndex + 1) % imageData.length;
            const image = imageData[currentIndex];
            
            document.getElementById('fullscreen-img').src = ''; // 重置图片以触发加载动画
            setTimeout(() => {
                document.getElementById('fullscreen-img').src = image.src;
                document.getElementById('fullscreen-title').textContent = image.title;
                document.getElementById('fullscreen-desc').textContent = image.desc;
            }, 50);
            
            // 重置缩放状态
            isZoomed = false;
            document.getElementById('fullscreen-img').classList.remove('zoomed');
            document.getElementById('zoom-btn').innerHTML = '<i class="fa fa-search-plus"></i>';
        };
        
        // 缩放图片
        const toggleZoom = () => {
            const img = document.getElementById('fullscreen-img');
            isZoomed = !isZoomed;
            
            if (isZoomed) {
                img.classList.add('zoomed');
                document.getElementById('zoom-btn').innerHTML = '<i class="fa fa-search-minus"></i>';
            } else {
                img.classList.remove('zoomed');
                document.getElementById('zoom-btn').innerHTML = '<i class="fa fa-search-plus"></i>';
            }
        };
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', () => {
            // 加载图片数据
            loadImages();
            
            // 页面加载和滚动时触发动画
            window.addEventListener('load', animateOnScroll);
            window.addEventListener('scroll', animateOnScroll);
            
            // 全屏查看器事件
            document.getElementById('close-fullscreen').addEventListener('click', closeFullscreen);
            
            // 点击空白处关闭全屏查看器
            document.getElementById('fullscreen-view').addEventListener('click', (e) => {
                if (e.target === document.getElementById('fullscreen-view')) {
                    closeFullscreen();
                }
            });
            
            // ESC键关闭全屏查看器
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && document.getElementById('fullscreen-view').classList.contains('active')) {
                    closeFullscreen();
                } else if (e.key === 'ArrowLeft' && document.getElementById('fullscreen-view').classList.contains('active')) {
                    prevImage();
                } else if (e.key === 'ArrowRight' && document.getElementById('fullscreen-view').classList.contains('active')) {
                    nextImage();
                } else if (e.key === '+' && document.getElementById('fullscreen-view').classList.contains('active')) {
                    toggleZoom();
                }
            });
            
            // 图片缩放事件
            document.getElementById('zoom-btn').addEventListener('click', toggleZoom);
            document.getElementById('fullscreen-img').addEventListener('click', (e) => {
                // 只有点击图片本身时才触发缩放，避免点击控件时缩放
                if (e.target === document.getElementById('fullscreen-img')) {
                    toggleZoom();
                }
            });
            
            // 前后翻页事件
            document.getElementById('prev-btn').addEventListener('click', prevImage);
            document.getElementById('next-btn').addEventListener('click', nextImage);
        });